<template>
  <div  >
    <div class="search" style="justify-content:right">
      <div class="search-button">
        <div class="button-item button-text grey" @click="goBack">返回</div>
      </div>
    </div>
    <el-tabs v-model="activeName">
    <el-tab-pane  name="first">
      <span slot="label"> 每日情况 <span v-if="normalData.length>0">({{ normalData.length }})</span></span>
      <el-table
      :data="normalData"
      style="width: 90vw">
      <el-table-column
      type="index"
      label="序号"
      >
    </el-table-column>
      <el-table-column
        prop="settleBizDate"
        label="统计日期"  
        width="100"
        >
      </el-table-column>
      <el-table-column
        prop="bizNum"

        label="总订单">
      </el-table-column>
      <el-table-column
        prop="kscNum"

        label="总菜品">
      </el-table-column>
      <el-table-column
        prop="bizTimeoutNum"
        label="超时订单"
        >
      </el-table-column>
      <el-table-column
        prop="kscTimeoutNum"
        label="超时菜品">
      </el-table-column>
      <el-table-column
        prop="kscTime"
        label="平均耗时">
        <template slot-scope="scope">
          {{ scope.row. kscTime}}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="kscHisTime"
        label="历史最优">
        <template slot-scope="scope">
          {{ scope.row. kscHisTime}}分钟
        </template>
      </el-table-column>
      <el-table-column
        prop="kscTimeoutPer"

        label="异常率">
        <template slot-scope="scope">
          {{ scope.row. kscTimeoutPer}}%
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="orderCallTime"
        label="菜品耗时">
        <template slot-scope="scope">
         {{ 
           (scope.row.orderCallTime/60).toFixed(2)
          }}分钟
        </template>
      </el-table-column> -->
    </el-table>
    </el-tab-pane>
    <el-tab-pane  name="second">
      <span slot="label"> 异常菜品 <span v-if="timeOutData.length>0">({{ timeOutData.length }})</span></span>
      <el-table
      :data="timeOutData"
      :row-class-name="tableRowClassName"
      style="width: 90vw">
      <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
        prop="tableName"
        label="桌号"  
        width="100"
        >
      </el-table-column>
      <el-table-column
        prop="itemName"
        label="菜品名称"
        width="200"
        >
      </el-table-column>
      <el-table-column
        prop="callUpTime"
        width="200"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="cookFinishTime"
        width="200"
        label="配菜时间">
      </el-table-column>
      <el-table-column
        prop="serveFinishTime"
        width="200"
        label="传菜时间">
      </el-table-column>
      <el-table-column
        prop="orderCallTime"
        label="菜品耗时">
        <template slot-scope="scope">
         {{ 
           (scope.row.orderCallTime/60).toFixed(2)
          }}分钟
        </template>
      </el-table-column>
    </el-table>
    </el-tab-pane>
  </el-tabs>
  </div>
 
</template>

<script>
// import api from "../api.js"
import util from "../util.js"
export default {
  data() {
    return {
			normalData: [],
      timeOutData:[],
      activeName:'first',
    };
  },
  mounted(){
    this.statDetail();
  },
  methods:{
    tableRowClassName() {
        return 'error-talbe';
      },
      goBack: function() {
		  this.$router.go(-1);
	  },
    statDetail: function () {
      util
        .request(
          this,
         "/v2/{shopId}/biz/his/bi",
         {
            needException: true,
          },
          "GET"
        )
        .then((res) => {
          console.log("aaaaa",res)
          this.normalData=res.data
        })
        .catch((err) => {
          console.log(err)
          // this.$message.error(err);
        });
        util
        .request(
          this,
         "/v2/{shopId}/histories/ksc?needException=true",
          {
            needException: true,
          },
          "GET"
        )
        .then((res) => {
          this.timeOutData=res.data
        })
        .catch((err) => {
          this.$message.error(err.data.errmsg);
        });
    },
  }
};
</script>
<style lang="css">
  .el-table .error-talbe {
    background: #fbc4c4;
  }
@import "~@/assets/css/common.css";
@import "~@/assets/css/list.css";
</style>
